<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.d1 {
				height: 100px;
				width: 100px;
				background-color: #000000;
			}
			.d2 {
				height: 100px;
				width: 100px;
				background-color: red;
			}
			
			.big {
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		框架：是对某一类技术封装
		封装：就一些常用性方法放到一个类中。
		目的就是为了使用方便。
		安装
		$is not a function
		$is not defined
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div>
			通过next()获取
		</div>
		<button type="button">按钮1</button>
		<button type="button">按钮2</button>
		<h2>标题1</h2>
		<h2>标题2</h2>
		<span>Span内容</span>
		<script type="text/javascript">
			//获取页面元素
			let d1 = document.getElementById("d1");//dom元素
			//指定class属性
			d1.className = "d1";
			//指定style属性
			d1.style = "color: white";//可以一次写多个
			//指定文本内容
			d1.innerText = "d1";
			d1.innerHTML = "<strong>哈哈</strong>";
			// d1.onclick = function() {
			// 	console.log("js添加的函数");
			// }
			click("div", function() {
				console.log("自定义js添加的函数");
			});
			
			function click(name, fnc) {
				if(name.startsWith("#")) {
					document.getElementById(name.substr(1)).onclick = fnc;
				}else if(name.startsWith(".")) {
					let arr = document.getElementsByClassName(name.substr(1));
					for(let item of arr) {
						item.onclick = fnc;
					}
				}else {
					let arr = document.getElementsByTagName(name);
					for(let item of arr) {
						item.onclick = fnc;
					}
				}
				
			}
			
			//Jquery的准备环境
			$(document).ready(function() {
				console.log($("#d2"));//$("#d2")得到的是一个jquery对象
				// $("#d2").className = "d2";不对的
				//Jquery操作属性
				$("#d2").attr("class", "d2");
				$("#d2").css("color", "blue");//一个属性对应一个css方法
				$("#d2").text("d2");//如果传值，即为赋值操作
				$("#d2").html("<strong>哈哈</strong>")
				.next()
				.css("font-size", "40px");
				//获取内容
				console.log($("#d2").text());//没有参数就是获取内容
				$("button").click(function(event) {
					console.log(event, "click点击");
				});
				console.log(jQuery("span").text());
				$("h2").css("background-color","#CCFFFF")				.next().css("display","block");
				console.log($("h2").html());
				/*
					html()方法只获取第一个内容
					text()方法会获取所有匹配的标签内容
					添加样式
					attr("class", 值)
					addClass();
				*/				$("#d2").addClass("big");//附加样式，不会覆盖原来的样式
				// $("#d2").attr("class", "big");//覆盖原来的样式
				$("#d2").removeClass("d2");//删除指定的样式
				/*文本内容
					js                         jq
						innerText			text()
						innerHTML			html()
						value				val()
				*/
				//dom与jq对象之间互转
				//dom转jq
				console.log(d1);
				console.log($(d1));
				//jq转dom
				let d2 =  $("#d2");
				console.log(d2);
				console.log(d2[0]);
			});
		</script>
	</body>
</html>
